<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">

    <title>本月热门</title>
    <!-- 引入字体图标 -->
    <link href="https://cdn.bootcdn.net/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <link rel="stylesheet" href="css/Homepage.css">

    <link rel="stylesheet" type="text/css" href="css/StyleForBuyPage.css"/>

    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    	
    <link rel="stylesheet" type="text/css" href="css/HotAdPage.css"/>


</head>

<body>

<div class="navbar">
    <input type="checkbox" id="checkbox">
    <label for="checkbox" class="titleLabel">
        <i class="fa fa-bars" aria-hidden="true">
        	&nbsp;&nbsp;本月热门
        </i>
    </label>
    <ul>
        <div id="icon">
    		 <li>
	            <img :src="user.icon" alt="">
	            <span>欢迎您！{{user.nickname}}</span>
	        </li>
    	</div>
        <li>
            <a href="Manager-bubble-Homepage.html">
                <i class="fa fa-home" aria-hidden="true"></i>
                <span>首页</span>
            </a>
        </li>
        <li>
            <a href="javascript:void(0)">
                <i class="fa fa-thumbs-up" aria-hidden="true"></i>
                <span>本月热门</span>
            </a>
        </li>
        <li>
            <a href="Manager-Info-Page.html">
                <i class="fa fa-user-circle-o" aria-hidden="true"></i>
                <span>个人中心</span>
            </a>
        </li>
        <li>
            <a href="Manager-Buy-Page.html">
                <i class="fa fa-shopping-bag" aria-hidden="true"></i>
                <span>购买广告</span>
            </a>
        </li>
        <li>
            <a href="Manager-user-list.html">
                <i class="fa fa-users" aria-hidden="true"></i>
                <span>用户列表</span>
            </a>
        </li>
        <li>
            <a href="Manager-advlist.html">
                <i class="fa fa-sitemap" aria-hidden="true"></i>
                <span>广告列表</span>
            </a>
        </li>
        <li>
            <a href="Manager-Chat-Page.html">
                <i class="fa fa-comments" aria-hidden="true"></i>
                <span>聊天窗口</span>
            </a>
        </li>
        <li onclick="Logout()">
            <a href="javascript:void(0)">
                <i class="fa fa-sign-out" aria-hidden="true" style="transform: rotate(180deg);"></i>
                <span>退出登录</span>
            </a>
        </li>
    </ul>

    <div id="app" class="main myStyle">
        <!--我是内容区-->
        <div style="width: 600px; height: 100%;">
        	<div class="rostrum">
	        	<img src="img/other/rostrum.png" style="object-fit: cover; width: 100%;" />
	        </div>
	        
        	<div>
        		<div class="king">
	        		<img src="img/other/king.png" style="object-fit: cover; width: 100%;" />
	        	</div>
        		<img :src="ad_1.ad_img" class="no1" />
        	</div>
        	<div>
        		<img :src="ad_2.ad_img" class="no2" />
        	</div>
        	<div>
        		<img :src="ad_3.ad_img" class="no3" />
        	</div>
        	
        </div>
        
        <div style="margin-left: 50px;">
        	 <!--数据列表-->
            <table style="text-align: center; color: #a262ad;">
                <thead>
                <tr style="height: 50px; line-height: 50px;">
                    <th style="width: 80px"  class="">Logo</th>
                    <th style="width: 240px" class="">品牌名称</th>
                    <th style="width: 400px" class="">网站地址</th>
                    <th style="width: 300px" class="">企业名称</th>
                    <th style="width: 300px" class="">品牌描述</th>
                </tr>
                </thead>
                <tbody>
                <tr v-for="(ad,index) in ads" :key="index" :class="{ even: index % 2 === 0 }">
                		<td class="td">
							<img :src="ad.ad_img" class="ad" />
	                    </td>
	                    <td class="td">{{ad.ad_brand_name}}</td>
	                    <td class="td"><a :href="ad.ad_website">{{ad.ad_website}}</a></td>
	                    <td class="td">{{ad.ad_company_name}}</td>
	                    <td class="td">{{ad.ad_description}}</td>
                </tr>
                </tbody>
            </table>
            <!--数据列表/-->
        </div>

         
    </div>
</div>
</body>

<script src="js/vue.js"></script>
<script src="js/axios-0.18.0.js"></script>
<script src="//unpkg.com/vue@2/dist/vue.js"></script>
<script src="https://unpkg.com/element-ui/lib/index.js"></script>

<script src="js/GetInfo.js"></script>

<script>
    function Logout() {
        var flag = window.confirm("确定退出登录吗？");
        if (flag) {
            window.location.href = "AdInfo?type=logout";
        }
    }
    
	new Vue({
		el: "#app",
		data: {
			ads: [],
			ad_1: "",
			ad_2: "",
			ad_3: ""
		},
		methods: {
			getHotAdsInfo() {
				var _this = this;
				axios({
					method: "get",
					url: "AdInfo?type=hot"
				}).then(function(resp) {
					_this.ads = resp.data;
					_this.ad_1 = resp.data[0];
					_this.ad_2 = resp.data[1];
					_this.ad_3 = resp.data[2];
				})
			},
			goToAdPage(ad_website) {
				window.location.href=ad_website;
			}
		},
		mounted() {
			this.getHotAdsInfo();
			
		}

	})
	

</script>
<style>
	.even {
	  /* 为偶数行定义样式 */
	  background-color: #e3eeff;
	}
</style>

</html>